<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas width="200px" height="200px"  onmousedown="dian(event)" style="border: 1px solid red" id="myCanvas"></canvas>

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    function dian(event) {
        console.log(event)

        console.log("0000")
        ctx.fillStyle="#FF0000";
        ctx.fillRect(event.offsetX,event.offsetY,10,10);
    }
</script>
</body>
</html>